<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import china from "./china.json";
let myRich = null;
let myEchart = null;
onMounted(() => {
  myRich = document.getElementById("rich");
  echarts.registerMap("china", china);
  myEchart = echarts.init(myRich, null, {
    locale: "ZH",
  });
  let option = {
    tooltip: {},
    geo: {
      map: "china",
      roam: true,
      zoom: 2,
      itemStyle: {
        areaColor: "pink",
      },
      regions: [
        {
          name: "广东省",
          itemStyle: {
            areaColor: "yellow",
          },
        },
      ],
    },
    series: [
      // {
      //   type: 'graph',
      //   coordinateSystem: 'geo',
      //   data: [[116.405285, 39.904989], [117.190182, 39.125596], [114.502461, 38.045474]],
      //   links: [
      //     {
      //       source: 0,
      //       target: 1
      //     }
      //   ]
      // },
      {
        type: "lines",
        polyline: true,
        effect: {
          show: true,
          symbol: "image://http://localhost:5173/image/plane.svg",
          symbolSize: 15,
        },
        lineStyle: {
          color: "green",
          width: 2,
        },
        data: [
          {
            // 一条线
            coords: [
              [117.190182, 39.125596],
              [116.405285, 39.904989],
              [113.280637, 23.125178],
            ],
          },
          {
            coords: [
              [113.54909, 22.198951],
              [125.3245, 43.886841],
            ],
          },
        ],
      },
    ],
  };
  myEchart.setOption(option);
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 600px;
}
</style>
